<template>
  <el-dialog top="-300px" @closed="diaBeforeClose" v-loading="uploadLoadVis" title="上传安装包" append-to-body
              :visible.sync="showFlag" width="720px" class="uploadDia">
    <el-upload style="text-align:center" accept=".tar.gz" class="upload-demo" drag :action="packageUploadUrl"
                :on-success="uploadPackAgeSuccess" :before-upload="beforeUploadPackAge"
                :on-exceed="uploadPackAgeExceed" :data="{version}" :headers="{authorization:token}"
                :on-error="uploadPackAgeError"
                :on-remove="uploadPackAgeRemove" :limit="10" :file-list="uploadPackageFileList">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div style="text-align:center;margin-left:-60px;margin-top:10px">版本号:ㅤ
      <el-input style="width:360px;" v-model="version" placeholder="请输入版本号"></el-input>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="showFlag = false">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

export default {
  data () {
    return {
      version:'',
      uploadPackageFileList:[],
      packageUploadUrl: `${process.env.UPLOAD_PARAM}/sys_file/uploadFile`,
      token:'',
      uploadLoadVis:false,
      showFlag:true
    }
  },
  mounted(){
    this.token = JSON.parse(localStorage.getItem('userInfo')).authorization
  },
  methods: {
    diaBeforeClose() {
        this.version = '';
        this.uploadPackageFileList=[];
        this.$emit('closeAfter',false);
    },
    beforeUploadPackAge(file) {
        const fileTypeLim = file.name.indexOf('tar.gz') != -1
        if (!fileTypeLim) {
          this.$message.error('只能上传 tar.gz 格式文件!')
          return false
        }
        if (this.version.trim()=='') {
          this.$message.error('请输入本次上传的安装包的版本号!')
          return false
        }
        this.uploadLoadVis = true
        return true
    },
    uploadPackAgeSuccess(response, file, fileList) {
        this.uploadLoadVis = false
        if (response.code == 0) {
            } else {
            for (let i in fileList) {
                if (fileList[i].uid == file.uid) {
                    this.uploadPackageFileList.splice(i, 1)
                }
            }
            return this.$message.error(response.msg)
        }
    },
    uploadPackAgeExceed() {
        this.$message.error('最大上传数为10')
        return false
    },
    uploadPackAgeError(err, file, fileList) {
        this.uploadLoadVis = false
    },
    uploadPackAgeRemove(file, fileList) {
        for (let i in fileList) {
            if (fileList[i].uid == file.uid) {
                this.uploadPackageFileList.splice(i, 1)
            }
        }
    },
  },
}
</script>
<style scoped>
.uploadDia {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

</style>
